<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link th:href="@{/erp/assets/css/bootstrap.min.css}" rel="stylesheet"/>
        <link rel="stylesheet" th:href="@{/erp/css/style.css}"/>
        <link rel="stylesheet" th:href="@{/erp/assets/css/ace.min.css}"/>
        <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome.min.css}"/>
        <script th:src="@{/erp/assets/js/jquery.min.js}"></script>
        <script th:src="@{/erp/assets/js/bootstrap.min.js}"></script>
        <script th:src="@{/erp/assets/js/jquery.dataTables.min.js}"></script>
        <script th:src="@{/erp/assets/js/jquery.dataTables.bootstrap.js}"></script>
        <script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript"></script>

        <title>采购申请列表</title></head>
    <body>

        <div class="margin clearfix">
            <div class="stystems_style">
                <div class="tabbable">
                    <div class="page-content clearfix">
                        <div id="Member_Ratings">
                            <div class="search_style">
                                <form id="queryForm" action="/procurement/list" method="post">
                                <ul class="search_content clearfix">
                                    <li><label class="l_f">产品名称</label><input name="pname" type="text" class="text_add"
                                                                              placeholder="产品名称" style=" width:250px"/>
                                    </li>
                                    <li><label class="l_f">状态</label><select name="status" style='width:150px'>
                                        <option value=''>请选择</option>
                                        <option value='未付款'>未下单</option>
                                        <option value='已付款'>已下单</option>
                                    </select></li>
                                    <li style="width:90px;">
                                        <button id="btn" type="button" class="btn_search"><i class="fa fa-search"></i>查询</button>
                                    </li>
                                    <button onClick="javascrtpt:window.location.href='/procurement/list/order_zjddPage'"
                                            class="btn btn-primary radius" type="button">最近订单
                                    </button>
                                </ul>
                                </form>
                            </div>
                            <div id="home" class="tab-pane active">
                                <table class="table table-striped table-bordered table-hover" id="sample-table"
                                       style="width: 100%">
                                    <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>订单编号</th>
                                        <th>订单类型</th>
                                        <th>产品名称</th>
                                        <th>产品编号</th>
                                        <th>需求数量</th>
                                        <th>申请时间</th>
                                        <th>交易时间</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
<script>
    jQuery(function ($) {
        var oTable1 = $('#sample-table').dataTable({
            iDisplayLength: 5, //默认显示的记录数
            aLengthMenu: [5,10, 15, 20, 50, 100], //更改显示记录数选项
            bFilter: false, //是否启动过滤、搜索功能
            "ordering": false,
            "bStateSave": false,//状态保存
            "serverSide": true,		//打开服务器模式
            "ajax": {
                "url": "/procurement/list",
                "type": "POST",
                dataSrc: "data",
                data: function (d) {
                    var param = {};
                    param.draw = d.draw;
                    param.start = d.start;
                    param.length = d.length;
                    var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                    formData.forEach(function (e) {
                        param[e.name] = e.value;
                    });
                    return param;//自定义需要传递的参数。
                },
            },
            "columns": [
                {"data": 'id'},
                {"data": 'orderId'},
                {"data": 'payType'},
                {"data": 'productName'},
                {"data": 'proId'},
                {"data": 'sum'},
                {"data": 'orderTime'},
                {"data": 'payTime'},
                {
                    "data": 'payment', "render": function (data) {
                        if (data === '未付款') {
                            return /*<![CDATA[*/"<span class='label label-success radius'>未下单</span>"/*]]>*/;
                        } else if (data === '已付款') {
                            return /*<![CDATA[*/"<span class='label label-success radius'>已下单</span>"/*]]>*/;
                        }
                    }
                },
                { "data": null}
            ],"columnDefs": [
                {
                    // targets用于指定操作的列，从第0列开始，-1为最后一列，这里第六列
                    // return后边是我们希望在指定列填入的按钮代码
                    "targets": -1,
                    "render": function ( data, type, full, meta ) {
                        if (data.orderStatus == '已发货'){
                            return /*<![CDATA[*/"<a title='查看详情'  id = 'details'  class='btn btn-xs btn-success' ><i class='icon-list bigger-120'></i></a> <div title='查看物流' id = 'logistics'  class='btn btn-xs btn-info' ><i class='bigger-10' style='fout-size:5''>查看物流</i></div>"/*]]>*/
                        } else if (data.orderStatus == '已签收'){
                            return /*<![CDATA[*/"<a title='查看详情'  id = 'details'  class='btn btn-xs btn-success' ><i class='icon-list bigger-120'></i></a> <div title='已签收' class='btn btn-xs btn-info' ><i class='bigger-10' style='fout-size:5''>已签收</i></div>"/*]]>*/
                        } else if (data.orderStatus == '已入库'){
                            return /*<![CDATA[*/"<a title='查看详情'  id = 'details'  class='btn btn-xs btn-success' ><i class='icon-list bigger-120'></i></a> <div title='已入库' class='btn btn-xs btn-info' ><i class='bigger-10' style='fout-size:5''>已入库</i></div>"/*]]>*/
                        }else {
                            return /*<![CDATA[*/"<a title='查看详情'  id = 'details'  class='btn btn-xs btn-success' ><i class='icon-list bigger-120'></i></a>"/*]]>*/
                        }
                    }
                }
            ],
        });
        $("table tbody").on("click", "#details", function () {
            //获取行
            var row = $("table tr").index($(this).closest("tr"));
            //获取某列（从0列开始计数）的值
            var id = $("table").find("tr").eq(row).find("td").eq(0).text();

            layer.open({
                type: 2,
                title: '订单详情',
                shadeClose: true,
                shade: 0.8,
                area: ['90%', '90%'],
                content: '/procurement/details?id=' + id //iframe的url
            });

        });
        $("table tbody").on("click", "#logistics", function () {
            //获取行
            var row = $("table tr").index($(this).closest("tr"));
            //获取某列（从0列开始计数）的值
            var id = $("table").find("tr").eq(row).find("td").eq(0).text();

            layer.open({
                type: 2,
                title: '查看物流',
                shadeClose: true,
                shade: 0.8,
                area: ['90%', '90%'],
                content: '/procurement/logistics?id=' + id, //iframe的url
                end : function () {
                    oTable1.fnDraw(false);
                }
            });

        });

        $("#btn").click(function () {
            oTable1.fnDraw();
        })

    })
</script>
